<template>
	<view class="box">
		<view class="box-title">我的名片数据</view>
		<view class="header">
			<view class="header-item" @click="setType(1)">
				<view class="header-item-num">{{info.fk || 0}}</view>
				<view :class="params.type === 1 ?'header-item-tx header-item-ac' : 'header-item-tx'">我的访客</view>
			</view>
			<view class="header-item" @click="setType(2)">
				<view class="header-item-num">{{info.ck || 0}}</view>
				<view :class="params.type === 2 ?'header-item-tx header-item-ac' : 'header-item-tx'">我看过的</view>
			</view>
			<view class="header-item" @click="setType(3)">
				<view class="header-item-num">{{info.fx || 0}}</view>
				<view :class="params.type === 3 ?'header-item-tx header-item-ac' : 'header-item-tx'">被分享次数</view>
			</view>
		</view>
		<view style="width: 690rpx;margin: 0 auto; margin-bottom: 30rpx;">
			<u-search placeholder="请输入关键字" v-model="params.name" :clearabled="true" :showAction="false"></u-search>
		</view>
		<view class="content">
			<view class="content-title">{{['最近访客','我看过了谁的名片','谁分享过我的名片'][params.type - 1]}}</view>
			<view class="list" v-if="list.length > 0">
				<view class="list-item" v-for="it in list">
					<view class="list_item" @click="toMixinIndex(2,{userId:it.user_id,type: params.type,business_card_id: it.business_card_id})">
						<view class="list_item-img">
							<image :src="it.head" style="border-radius: 50%;"></image>
							<view class="list_item-img-tx" v-if="it.count">来访{{it.count}}次</view>
						</view>

						<view class="list_item-content">
							<view class="list_item-content-h">
								<view class="list_item-content-h-name">
									{{it.nickname}}
									<image :src="ossUrl + `/static/setting/${it.sex === '女' ? '7' : '6'}.png`"
										mode=""></image>
										<image :src="u" mode="" style="border-radius: 50%;margin-left: 10rpx;" v-for="u in it.Icon"></image>
								</view>
								<view class="list_item-content-h-address">
									<image :src="ossUrl + `/static/card/2.png`" mode=""></image>
									{{it.address}}
								</view>
							</view>
							<view class="list_item-content-subTitle" v-if="it.circle_name">
									{{params.type === 1 ? 'TA看过您：' : params.type === 2 ? '我看过TA的：' : 'TA分享了您：'}}<text>{{it.circle_name}}</text>
							
								</view>
						<!-- 	<view class="list_item-content-subTitle">
								{{it.name}}

							</view>
							<view class="list_item-content-address">{{it.company}}</view>
							<view class="list_item-content-address" v-for="item in it.business_card">
								名片{{item.letter}}：{{item.identity_name}}
							</view> -->
							<view class="list_item-content-time" v-if="it.add_time">
								{{getTime(it.add_time)}}
							</view>
						</view>
						<view class="list_item-rig">
							<view class="list_item-rig-btn" v-if="it.state == 1 || it.state == 4" @click.stop="agree(it.user_id)">交换名片</view>
							<view class="list_item-rig-tx" v-if="it.state == 2">等待同意</view>
							<view class="list_item-rig-tx" v-if="it.state == 3">已交换</view>
						</view>
					</view>
				</view>
			</view>
			<view class="noData" style="padding-bottom:120rpx;" v-else>
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
			</view>
			<!-- 占位 -->
			<AddFriends ref="AddFriendsRef" @reload="reload" />
		</view>
	</view>
</template>

<script>
	import { InformationBusinessCardData,InformationMpJiaohuan,InformationUserInfo } from '@/common/http/api.js'
	import AddFriends from './components/addFriends/addFriends.vue'
	export default {
		components: {
			AddFriends
		},
		data() {
			return {
				//分页
				params: {
					name: '',
					page: 1,
					type: 1 // 1是访客 2是我看过 3是分享
				},
				isList: true,
				list: [],
				info: ''
			};
		},
		onLoad() {
			this.init()
			
		},
		watch:{
			'params.name': {
				handler(val){
					this.params.page = 1
					this.init()
				},
				deep: true
			}
		},
		onReachBottom() {
			console.log('触底')
			if (this.isList) {
				this.params.page++
				this.init()
			}
		},
		methods:{
			getTime(time){
				
				let name = ''
				let t = ''
				try {
					if(time){
						let timeArr = time.split(' ')
						let y = timeArr[0].split('-')
						let s = timeArr[1].split(':')
						t = `${y[1]}-${y[2]} ${s[0]}:${s[1]}`
					}
				} catch (e) {}
				switch (this.params.type){
					case 1:
						name = t + '访问了你的名片'
						break;
					case 2:
						name = t + '看过他的名片'
						break;
					case 3:
						name = t + '分享了我的名片'
						break;
					default:
						break;
				}
				return name
			},
			setType(e){
				this.params.type = e
				this.reload()
			},
			reload() {
				this.params.page = 1
				this.list = []
				this.init()
			},
			init() {
				uni.showLoading()
				InformationBusinessCardData(this.params).then(res => {
					uni.hideLoading()
					console.log('res', res)
					this.info = res.data
					if (Array.isArray(res.data.list) && res.data.list.length > 0) {
						if (this.params.page === 1) {
							this.list = res.data.list
						} else {
							this.list = this.list.concat(res.data.list)
						}
					} else {
						this.isList = false
					}
				})
			},
			agree(id) {
				this.$refs.AddFriendsRef.show(id)
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F7F8;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.box {
		padding-top: 30rpx;
	}

	.box-title {
		width: 690rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		font-family: PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: #131313;
	}

	.header {
		width: 690rpx;
		margin: 0 auto;
		height: 188rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-bottom: 19rpx;

		.header-item {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.header-item-num {
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 40rpx;
				color: #131313;
				margin-bottom: 15rpx;
			}

			.header-item-tx {
				padding: 11rpx 31rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #131313;
			}

			.header-item-ac {
				background: #D6F6EA;
				border-radius: 23rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #12B475;
			}
		}
	}

	.content {
		width: 100%;
		background: white;

		.content-title {
			width: 690rpx;
			margin: 0 auto;
			padding: 31rpx 0;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #131313;
		}

		.list {
			width: 100%;

			.list-item {
				width: 100%;
				border-bottom: 10rpx solid #F6F7F8;
				background: #FFFFFF;

				.list_item {
					box-sizing: border-box;
					padding: 39rpx 49rpx;
					display: flex;
					align-items: center;

					.list_item-img {
						width: 100rpx;
						height: 100rpx;
						margin-right: 13rpx;
						position: relative;

						.list_item-img-tx {
							font-family: PingFang SC;
							font-weight: 300;
							font-size: 20rpx;
							color: #666666;
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translateX(-50%);
							min-width: 93rpx;
							height: 26rpx;
							background: #EFEFEF;
							border-radius: 13rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					.list_item-content {
						width: 400rpx;

						.list_item-content-h {
							display: flex;
							align-items: center;
							
							margin-bottom: 16rpx;

							.list_item-content-h-name {
								display: flex;
								align-items: center;
								font-family: PingFang SC;
								font-weight: bold;
								font-size: 30rpx;

								image {
									margin-left: 14rpx;
									width: 26rpx;
									height: 26rpx;
								}
							}

							.list_item-content-h-address {
								display: flex;
								align-items: center;
								font-family: PingFang SC;
								font-weight: 300;
								font-size: 24rpx;
								color: #7A7A7A;
								margin-left: 70rpx;
								image {
									margin-right: 10rpx;
									width: 30rpx;
									height: 30rpx;
								}
							}
						}

						.list_item-content-subTitle {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							margin-bottom: 17rpx;

							text {
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #12B475;
								margin-left: 5rpx;
							}
						}

						.list_item-content-address {
							min-width: 0;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							//height: 23rpx;
						}
						.list_item-content-time {
							background: #ececec;
							font-size: 20rpx;
							padding: 5rpx 15rpx;
							width: fit-content;
							color: #6C6B6B;
							margin-top: 10rpx;
							border-radius: 20rpx;
						}
					}

					.list_item-rig {
						flex: 1;
						min-width: 0;
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.list_item-rig-btn {
							width: 125rpx;
							height: 44rpx;
							border-radius: 22rpx;
							border: 1px solid #12B475;
							display: flex;
							justify-content: center;
							align-items: center;
							font-family: PingFang SC;
							font-weight: 300;
							font-size: 24rpx;
							color: #12B475;
						}
						.list_item-rig-tx {
							font-family: PingFang SC;
							font-weight: 300;
							font-size: 24rpx;
							color: #666666;
						}
					}
				}
			}
		}
	}
</style>